<template>
    <div>
        <MyNavBar :title="title" />
    </div>
    <div class="container">
        <Search v-model="search" style="width: 70%;" placeholder="输入群号/群名搜索" shape="round" @search="onSearch">
        </Search>
        <Button round plain class="word-button" @click="onSearch">搜索</Button>
    </div>
    <SearchItem :searchData="searchData" :noText="noText"></SearchItem>
</template>
<script setup>
import { ref, watch } from "vue";

import { Search, Button, Dialog } from "vant";
import { searchGroup } from '@/v-api/addressbook/group';
import MyNavBar from "@/components/MyNavBar/index.vue";
import SearchItem from './SearchItem.vue';

const search = ref("");
const title = ref("添加群聊");
let searchData = ref(null);
const noText = ref('')
const onSearch = async () => {
    if (search.value) {
        searchData.value = await searchGroup(search.value);
        console.log(searchData.value)
        noText.value = ''
        if(searchData.value === null){
            noText.value = '没有找到相关群聊'
        }
        else{
            noText.value = ''
        }
    } else {
        searchData.value =null
        noText.value = ''
    }

}
</script>
<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto
}

.word-button {
    margin-left: -10px;
    border: none;
    font-size: 13.5px;
    width: fit-content;
    height: 30px;
    background-color: rgb(244, 244, 244);
}
</style>